<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>栏目管理</title>
    <link rel="stylesheet" href="__ADMIN__/css/amazeui.min.css" />
    <link rel="stylesheet" href="__ADMIN__/css/app.css">
    <link rel="stylesheet" href="__STATIC__/layui/css/layui.css">
    <script src="__COMMON__/jquery.min.js"></script>
</head>
<body>
<div style="background: #e9ecf3" class="theme-white">
    <div class="row-content am-cf">
        <div class="row">
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-12" style="background: white">
                <div class="widget am-cf">
                    <div data-am-widget="titlebar" class="am-titlebar am-titlebar-default">
                        <h2 class="am-titlebar-title">栏目管理</h2>
                    </div>
                    <div class="widget-body  am-fr">

                        <div class="am-u-sm-12 am-u-md-6 am-u-lg-6">
                            <div class="am-form-group">
                                <div class="am-btn-toolbar">
                                    <div class="layui-btn-group">
                                        <button type="button" class="layui-btn layui-btn-sm" id="addNode" style="background: rgb(77, 177, 77)">
                                            <i class="layui-icon">&#xe654;</i> 新增顶级栏目
                                        </button>
                                        <button type="button" class="layui-btn layui-btn-sm layui-bg-blue" id="expand">
                                            <i class="layui-icon">&#xe622;</i> 展开全部
                                        </button>
                                        <button type="button" class="layui-btn layui-btn-sm layui-bg-red" id="fold">
                                            <i class="layui-icon">&#xe758;</i> 收起全部
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="am-u-sm-12">
                            <table id="treeTable"></table>

                            <script type="text/html" id="url-bar">
                                <a href="{{ d.url }}" target="_blank" style="color: #01AAED">
                                    <i class="layui-icon layui-icon-link"></i>
                                </a>
                            </script>

                            <script type="text/html" id="type-bar">
                                {{#  if(d.type == 'list'){ }}
                                <a class="am-badge am-badge-success">{{ d.type_name }}</a>
                                {{#  } else if(d.type == 'channel'){ }}
                                <a class="am-badge am-badge-info">{{ d.type_name }}</a>
                                {{#  } else { }}
                                <a class="am-badge am-badge-danger">{{ d.type_name }}</a>
                                {{#  } }}
                            </script>

                            <script type="text/html" id="status-bar">
                                {if (buttonAuth('channel/setchannelstatus'))}
                                <input type="checkbox" name="switch" lay-skin="switch" lay-text="显示|隐藏" {{#  if(d.status == 1){ }} checked {{# } }} lay-filter="status" data-id="{{ d.channel_id }}">
                                {else/}
                                {{#  if(d.status == 1){ }}
                                <a class="am-badge am-badge-success">显示</a>
                                {{#  } else { }}
                                <a class="am-badge am-badge-danger">隐藏</a>
                                {{# } }}
                                {/if}
                            </script>

                            <script type="text/html" id="opt-bar">
                                <div class="layui-btn-group">
                                    {if (buttonAuth('channel/add'))}
                                    <button type="button" class="layui-btn layui-btn-sm" onclick="addSub(this)" data-parentId="{{ d.channel_id }}" data-name="{{ d.name }}" style="background: rgb(77, 177, 77)">
                                        <i class="layui-icon">&#xe654;</i> 添加子栏目
                                    </button>
                                    {/if}
                                    {if (buttonAuth('channel/edit'))}
                                    <button type="button" class="layui-btn layui-btn-sm layui-bg-blue" onclick="editChannel(this)" data-id="{{ d.channel_id }}" data-parentId="{{ d.parent_id }}">
                                        <i class="layui-icon">&#xe642;</i> 编辑
                                    </button>
                                    {/if}
                                    {if (buttonAuth('channel/del'))}
                                    <button type="button" class="layui-btn layui-btn-sm layui-bg-red" onclick="delChannel(this)" data-id="{{ d.channel_id }}">
                                        <i class="layui-icon">&#xe640;</i> 删除
                                    </button>
                                    {/if}
                                </div>
                            </script>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="__ADMIN__/js/amazeui.min.js"></script>
<script src="__STATIC__/layui/layui.js"></script>
<script>
    var layer = null;
    var insTb = null;

    renderTable();

    function renderTable () {
        layui.config({
            base: '__STATIC__/layui/lay/modules/'
        }).use(['form', 'layer', 'treeTable'], function () {
            layer = layui.layer;
            var form = layui.form;

            form.on('switch(status)', function(data){

                var status = !data.elem.checked ? 2 : 1;
                var id = $(data.elem).attr('data-id');

                $.getJSON('{:url("channel/setChannelStatus")}', {id: id, status: status}, function (res) {
                    if (res.code != 0) {
                        renderTable();
                    }
                });
            });

            var treeTable = layui.treeTable;

            insTb = treeTable.render({
                elem: '#treeTable'
                ,url:'{:url("channel/index")}'
                ,title: '模型列表'
                ,toolbar: 'default'
                ,tree: {
                    iconIndex: 3,
                    isPidData: true,
                    idName: 'channel_id',
                    pidName: 'parent_id'
                }
                ,cols: [[
                    {field:'channel_id', title:'栏目ID', width: 80}
                    ,{field:'type_name', title:'类型', width: 100, toolbar: '#type-bar'}
                    ,{field:'model_name', title:'模型名称', width: 100}
                    ,{field:'name', title:'名称', width: 200}
                    ,{field:'url', title:'预览地址', width: 80, toolbar: '#url-bar', align: 'center'}
                    ,{field:'items', title:'文章数量', width: 80}
                    ,{field:'status', title:'状态', width: 100, toolbar: '#status-bar'}
                    ,{fixed:'right', title:'操作', toolbar: '#opt-bar'}
                ]]
                ,page: {
                    theme: '#23abf0'
                }
            });
        });
    }

    $(function () {

        $("#addNode").click(function () {

            var index = layer.open({
                type: 2,
                title: '添加栏目',
                maxmin: true,
                shade: 0.2,
                area: ['60%', '99%'],
                content: '{:url("channel/add", ["pid" => 0])}'
            });

            layer.full(index);
        });

        // 展开全部
        $("#expand").click(function () {
            insTb.expandAll();
        });

        // 收起全部
        $("#fold").click(function () {
            insTb.foldAll();
        });
    });

    // 添加子栏目
    function addSub(obj) {
        var index = layer.open({
            type: 2,
            title: '添加子栏目',
            maxmin: true,
            shade: 0.2,
            area: ['60%', '99%'],
            content: 'add?pid=' + $(obj).attr('data-parentId')
        });

        layer.full(index);
    }

    // 编辑栏目
    function editChannel(obj) {
        var index = layer.open({
            type: 2,
            title: '编辑栏目',
            maxmin: true,
            shade: 0.2,
            area: ['60%', '99%'],
            content: 'edit?id=' + $(obj).attr('data-id')
        });

        layer.full(index);
    }

    // 删除栏目
    function delChannel(obj) {
        layer.confirm('您确定要删除该栏目？', {
            icon: 3,
            title: '友情提示',
            btn: ['确定', '取消']
        }, function() {

            $.getJSON('{:url("channel/del")}', {id: $(obj).attr('data-id')}, function (res) {
               if (0 == res.code) {
                   layer.msg(res.msg);
                   setTimeout(function () {
                       renderTable();
                   }, 800);
               } else {
                   layer.msg(res.msg);
               }
            });
        }, function(){

        });
    }
</script>
</body>
</html>